<template>
	<view class="warp">
		<view class="header"></view>
		<view class="logo">
			<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/WechatIMG133.png"></image>
		</view>
		<view class="login_box">
			<view class="phone_box">
				<u-input v-model="phoneNumber" :clearable="false" placeholder="请输入手机号" type="number" :maxlength="11" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
			</view>
			<view class="phone_box">
				<u-input v-model="code" :clearable="false" placeholder="请输入验证码" type="number" :maxlength="4" :custom-style="{width:'340rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
				<view class="code" @click="getCode">{{codeTips}}</view>
			</view>
			<view class="phone_box">
				<u-input :clearable="false" v-model="password" :password-icon="false" placeholder="请输入密码(长度为6-16位)" type="password" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
			</view>
			<view class="phone_box" v-if="isRegister">
				<u-input v-model="invitationCode" :clearable="false" placeholder="请输入邀请码" type="text" :maxlength="9" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
			</view>
		</view>
		<view  v-if="isRegister" class="register" @click="toLogin">已有账号？去登陆</view>
		<view  v-if="isRegister" class="loginBtn">
			<u-button @click="onRegister" :custom-style="loginBtnStyle" hover-class="none" shape="circle" plain>注册</u-button>
		</view>
		<view  v-if="!isRegister" class="loginBtn">
			<u-button @click="onForgetPassword" :custom-style="loginBtnStyle" hover-class="none" shape="circle" plain>确认</u-button>
		</view>
		<view  v-if="isRegister" class="footer">
			<u-checkbox active-color="#20cbd4"  v-model="checked" name="check"></u-checkbox>
			<view class="remark">我已阅读并遵守<text @click="userAgreement(1)">《用户协议》</text>与<text @click="userAgreement(2)">《隐私协议》</text></view>
		</view>
		<view  v-if="!isRegister" class="footer">
			<view class="remark">交易密码与新的登录密码保持一致</view>
		</view>
		<u-toast ref="uToast"/>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {register,getPhoneCode,forgetPassword} from "@/common/api.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:"",
				password:"",
				invitationCode:"",
				loginBtnStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4"
				},
				checked:false,
				codeTips: '',
				isBack: 0,
				isRegister:false
			}
		},
		onLoad(options) {
			this.isBack = options.isBack || 0
			this.isBack = parseInt(this.isBack)
			console.log(JSON.stringify(options))
			if(options.type){
				if(options.type==1){
					this.isRegister=false;
					uni.setNavigationBarTitle({
						title:'找回密码'
					})
				}else if(options.type==2){
					this.isRegister=true;
					uni.setNavigationBarTitle({
						title:'注册'
					})
					if(options.spread_code){
						this.invitationCode=options.spread_code;
					}
					console.log(uni.getStorageSync("spread_code"))
					if(uni.getStorageSync("spread_code")&&this.invitationCode==""){
						
						this.invitationCode=uni.getStorageSync("spread_code");
					}
					
				}
			}else{
				this.$u.api.isLogin({}).then(res=>{
					if(res.code==200){
						uni.switchTab({
							url:"/pages/tabBar/home"
						})
					}else{
						this.isRegister=true;
						uni.setNavigationBarTitle({
						title:'注册'
						})
						
						if(options.scene){
							console.log(uni.getStorageSync("spread_code"))
							var spr=options.scene.substring(options.scene.indexOf("%3D")+3);
							this.invitationCode=spr;
						}
						console.log(uni.getStorageSync("spread_code"))
						if(uni.getStorageSync("spread_code")&&this.invitationCode==""){
							
							this.invitationCode=uni.getStorageSync("spread_code");
						}
					}
				});
				
				
			}
			
		},
		onBackPress(e) {
			uni.redirectTo({
				url:"/login/login"
			});
			return true;
		},
		methods: {
			userAgreement(index){
				uni.navigateTo({
					url:"/login/protocol?index="+index
				})
			},
			toLogin(){
				uni.redirectTo({
					url:"/login/login"
				})
			},
			onRegister(){
				if(!this.$u.test.mobile(this.phoneNumber)){
					this.$refs.uToast.show({title: '您输入的手机号不正确'});
					return;
				}
				if(!this.$u.test.code(this.code,4)){
					this.$refs.uToast.show({title: '您输入的验证码不正确'});
					return;
				}
				if(!this.$u.test.rangeLength(this.password, [6, 16])){
					this.$refs.uToast.show({title: '您输入的密码不正确'});
					return;
				}
				if(!this.checked){
					this.$refs.uToast.show({title: '请先同意协议'});
					return;
				}
				register(this,{phone:this.phoneNumber,code:this.code,spread_code:this.invitationCode,password:this.password,assist_id:0,isBack:this.isBack});
			},
			onForgetPassword(){
				if(!this.$u.test.mobile(this.phoneNumber)){
					this.$refs.uToast.show({title: '您输入的手机号不正确'});
					return;
				}
				if(!this.$u.test.code(this.code,4)){
					this.$refs.uToast.show({title: '您输入的验证码不正确'});
					return;
				}
				if(!this.$u.test.rangeLength(this.password, [6, 16])){
					this.$refs.uToast.show({title: '您输入的密码不正确'});
					return;
				}
				forgetPassword(this,{phone:this.phoneNumber,code:this.code,type:'forget_password',password:this.password});
			},
			getCode() {
				if(!this.$u.test.mobile(this.phoneNumber)){
					this.$refs.uToast.show({title: '您输入的手机号不正确'});
					return;
				}
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					if(this.isRegister){
						getPhoneCode(this,{phone:this.phoneNumber,type:"register"})
					}else{
						getPhoneCode(this,{phone:this.phoneNumber,type:"forget_password"})
					}
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		/* #ifndef H5 */
		background: linear-gradient(180deg,#6de3e9,#a0edf1 40%,#fff 98%);
		/* #endif */
		/* #ifdef H5 */
		background: #a0edf1;
		/* #endif */
		height: 100%;
	}
	.header{
		background-image: url("https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/logo_bg.png");
		background-size: 100% 100%;
		background-position: 0% 0%;
		background-repeat: no-repeat no-repeat;
		width: 100%;
		/* #ifndef H5 */
		height: 350rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 280rpx;
		/* #endif */
	}
	.logo{
		width: 400rpx;
		height: 120rpx;
		margin: 0 175rpx;
	}
	.logo image{
		width: 100%;
		height: 100%;
	}
	.login_box{
		margin: 70rpx 50rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.phone_box{
		padding:30rpx 30rpx 10rpx;
		width: 590rpx;
		border-bottom:1rpx solid #20cbd4;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.code{
		font-size: 30rpx;
		color:#13797f;
	}
	.register{
		color: #13797f;
		display: flex;
		justify-content: flex-end;
		padding: 0 80rpx 40rpx;
	}
	.loginBtn{
		padding: 0 100rpx;
	}
	.footer{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;
	}
	.remark{
		color: #20cbd4;
	}
	.remark text{
		text-decoration: underline;
	}
</style>
